<template>
  <div class="PStart" ref="PStart">
    <div class="bk">
      <el-empty description="暂无内容" v-if="startListLength == 0"></el-empty>
      <div class="block">
        <SmallBlock v-for="index in startListLength" :key="index" 
        :config="startList[index - 1]"
        ></SmallBlock>
      </div>
    </div>
    <div class="pagination">
      <el-pagination
      :hide-on-single-page="true"
      background
      layout="prev, pager, next"
      :page-count="totalPage"
      @current-change="changePage"
      @prev-click="beforePage"
      @next-click="nextPage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
    name: "PStart",
    data() {
      return {
        totalPage: 10,
        nowPage:1,
        startList:[],
        startListLength:0,
        flag:false
      };
    },
    created(){
      this.sendReq();
    },
    methods:{
      changePage(nowPage){
        this.nowPage = nowPage
        this.sendReq()
      },
      beforePage(nowPage){
        this.nowPage = nowPage
        this.sendReq()
      },
      nextPage(nowPage){
        this.nowPage = nowPage
        this.sendReq()
      },
      sendReq(){
        this.$store.dispatch('personalCenter/reqGetStart', this.nowPage).then((result)=>{
          if(result.data.status == '200'){
            this.startList = result.data.data
            this.totalPage = result.data.totalPage
            this.startListLength = result.data.data.length
            if(this.flag)this.scrool();
            this.flag = true
          }
        })
      },
      scrool(){
        window.scrollTo(0,this.$refs.PStart.offsetTop);
      },
    }
}
</script>
<style lang="less">
  .PStart{
    height: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    .bk{
      width: 80%;
      min-height: 1020px;
      .block{
        width: 100%;
      }
    }
    .pagination{
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
        .el-pagination {
            height: 40px;
            ul{
                height: 40px;
                li{
                    height: 40px;
                    width: 40px;
                    font-size: 20px;
                    line-height: 40px;
                }
                .active{
                    background-color: black !important;
                }
            }
            button{
                height: 40px;
                width: 40px;
                font-size: 20px;
                line-height: 40px;
            }
        }
    }
  }
</style>